<template>
  <div :class="cls" class="cell">
    <div v-if="data.type==='index'">
      {{data.label||'#'}}
    </div>
    <div v-else-if="data.type==='selection'">
      <i :class="selectionCls" @click="handleHeadSelection"></i>
    </div>
    <div v-else>
      {{data.label}}
      <span class="caret-wrapper" v-if="data.sortable" @click="handleSortClick(data.prop)">
        <i class="sort-caret ascending" :class="{current: sortProp===data.prop&&sortOrder==='ascending'}"></i>
        <i class="sort-caret descending" :class="{current: sortProp===data.prop&&sortOrder==='descending'}"></i>
      </span>
      <jh-popover class="filter-trigger" v-if="data.filterable" @change="handleFTgChange($event,data.prop)" ref="filterTrigger" :data-prop='data.prop'>
        <span slot="reference">
          <i class="iconfont icon-xiangxiazhankai"></i>
        </span>
        <filter-options :data='filterPopoverData' v-model="filters" v-if="filterProp===data.prop" @change="handleFOpchange($event,data.prop)" />
      </jh-popover>
    </div>
    <div v-if="data.children.length>0" :class="trCls" style="display: flex;justify-content: center;align-items: center;">
      <template v-for="(item, index) in data.children">
        <jh-virtual-table-thead :data="item" :cls="cls" />
      </template>
    </div>
  </div>
</template>

<script>
export default {
  name: 'jh-virtual-table-thead',
  props: {
    data: {
      type: Object,
      required: true
    },
    cls: {
      type: String,
      default: ''
    },
    trCls: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      sortProp: ''
    }
  }
}
</script>

<style lang="less" scoped>
.cell {
  flex: 1;
  &.cell-fixed {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>

